﻿<h3 class="important-tittle">Customizing Series</h3>

<h4>Strokes and Fills</h4>

<p>
    All the series have a <b>Stroke</b> and <b>Fill</b> properties these properties handle the color, both properties
    type is <i>System.Windows.Media.Brush</i> you can use complex fills or stokes,
    <a href="https://msdn.microsoft.com/en-us/library/aa970904(v=vs.100).aspx">here</a> is a good article about it
</p>

<pre class="prettyprint">mySeries.Fill = Brushes.Red;
mySeries.Stroke = Brushes.Blue;</pre>

<h4>Strokes <small class="text-muted"><i>Dashes and thickness</i></small></h4>

<p>
    Use the <b>Series.StrokeThickness</b> property as you need, to draw dashed strokes you can use the
    <b>Series.StrokeDashArray</b> property, you can find more information about dashed arrays
    <a href="http://searchwindevelopment.techtarget.com/tip/Understanding-line-stroke-patterns">here</a>
</p>

<pre class="prettyprint">&lt;lvc:LineSeries StrokeDashArray="2" /&gt;</pre>
<pre class="prettyprint">mySeries.StrokeDashArray = new DoubleCollection {2};</pre>

<h4>ZIndex <small class="text-muted"><i>overlapping order</i></small><i></i></h4>

<p>
    Every shape drawn by any series class is binded to the <i>Panel.ZIndex</i> property, so you can easily
    control which series is over or under in the z index, here is a short example
</p>

<pre class="prettyprint">&lt;lvc:LineSeries Panel.ZIndex="0" /&gt;
&lt;lvc:LineSeries Panel.ZIndex="1" /&gt;
&lt;lvc:LineSeries Panel.ZIndex="2" /&gt;
</pre>
<pre class="prettyprint">System.Windows.Controls.Panel.SetZIndex(mySeries, 0);
System.Windows.Controls.Panel.SetZIndex(mySeries, 1);
System.Windows.Controls.Panel.SetZIndex(mySeries, 2);</pre>

<h4>Visibility</h4>

<p>
    All drawn shapes are also binded to the <i>Series.Visibility</i> property so you can easily control
    your series visibility at run time.
</p>

<p>
    Notice any stacked series (including pie series) will not only change based on the visibility property,
    it will also remove the series from the stacked values, and the chart will be updated as if that series 
    had not existed.
</p>

<h4>Specialized properties</h4>

<p>
    There are some properties that do only exist at certain series, to find more info about how to customize
    every series, please see the related documentation, for example see <a href="/App/documentation/beta/LiveCharts-Wpf-LineSeries">/App/documentation/beta/LiveCharts-Wpf-LineSeries</a>
    to get more info about LineSeries, use the textbox in the documentation section to filter the all objects and get the desired article.
</p>

<p>
    Here is an example:
</p>

<div class="text-center">
    <img src="/App/Examples/v1/Series/Images/custom-line.jpg"/>
</div>

<h4>Code behind</h4>

<pre class="prettyprint">using LiveCharts;

namespace Wpf.CartesianChart.Customized
{
    public partial class CustomizedExample 
    {
        public CustomizedExample()
        {
            InitializeComponent();

            Values1 = new ChartValues&lt;double&gt; { 3, 4, 6, 3, 2, 6 };
            Values2 = new ChartValues&lt;double&gt; { 5, 3, 5, 7, 3, 9 };

            DataContext = this;
        }

        public ChartValues&lt;double&gt; Values1 { get; set; }
        public ChartValues&lt;double&gt; Values2 { get; set; }

    }
}
</pre>

<h4>XAML</h4>

<pre class="prettyprint">&lt;lvc:CartesianChart Background="#222E31"&gt;
  &lt;lvc:CartesianChart.Series&gt;
    &lt;lvc:LineSeries Values="{Binding Values1}" StrokeThickness="4" StrokeDashArray="2" 
                       Stroke="#6BBA45" Fill="Transparent" LineSmoothness="0" PointGeometry="{x:Null}" /&gt;
    &lt;lvc:LineSeries Values="{Binding Values2}" StrokeThickness="2" 
                       Stroke="#1C8FC5" Fill="Transparent" LineSmoothness="1" 
                       PointGeometrySize="15" PointForeround="#222E31"/&gt;
  &lt;/lvc:CartesianChart.Series&gt;
  &lt;lvc:CartesianChart.AxisX&gt;
    &lt;lvc:Axis IsMerged="True"&gt;
      &lt;lvc:Axis.Separator&gt;
        &lt;lvc:Separator StrokeThickness="1" StrokeDashArray="2"&gt;
          &lt;lvc:Separator.Stroke&gt;
            &lt;SolidColorBrush Color="#404F56" /&gt;
          &lt;/lvc:Separator.Stroke&gt;
        &lt;/lvc:Separator&gt;
      &lt;/lvc:Axis.Separator&gt;
    &lt;/lvc:Axis&gt;
  &lt;/lvc:CartesianChart.AxisX&gt;
  &lt;lvc:CartesianChart.AxisY&gt;
    &lt;lvc:Axis IsMerged="True"&gt;
      &lt;lvc:Axis.Separator&gt;
        &lt;lvc:Separator StrokeThickness="1.5" StrokeDashArray="4"&gt;
          &lt;lvc:Separator.Stroke&gt;
            &lt;SolidColorBrush Color="#404F56" /&gt;
          &lt;/lvc:Separator.Stroke&gt;
        &lt;/lvc:Separator&gt;
      &lt;/lvc:Axis.Separator&gt;
    &lt;/lvc:Axis&gt;
  &lt;/lvc:CartesianChart.AxisY&gt;
&lt;/lvc:CartesianChart&gt;</pre>